<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Untitled Document </title>
<style>
   #boxA, #boxB, #boxC{
   float:left; width: 200px; height: 200px;
   padding: 10px; margin: 10px;
   }
   #boxA{background-color: skyblue;}
   #boxB{background-color: green;}
   #boxC{background-color: yellow;}
   
   #drag, #drag2{
   width: 50px; height: 50px; padding: 5px; margin: 5px;
   -moz-user-select:none;
   color:white;
   }
   #drag{background-color:red;}
   #drag2{background-color:blue;}
   
   </style>

</head>
<body>
<div id="boxA"
    ondragenter= "return dragEnter(event)"
    ondrop= "return dragDrop(event)"
    ondragover= "return dragOver(event)">
    
    
    <div id="drag"draggable="true" 
    ondragstart="return dragStart(event)"
    ondragend= "return dragEnd(event)">
    drag me </div>
    
    <div id="drag2"draggable="true" 
    ondragstart="return dragStart(event)"
    ondragend= "return dragEnd(event)">
    drag me </div>
    
    </div>
    
    <div id="boxB"
    ondragenter= "return dragEnter(event)"
    ondrop= "return dragDrop(event)"
    ondragover= "return dragOver(event)">
    
    </div>
    
    <div id="boxC"
    ondragenter= "return dragEnter(event)"
    ondrop= "return dragDrop(event)"
    ondragover= "return dragOver(event)">
    
    </div>
    
</body>
</html>

